import React from "react";
import styles from './index.module.scss';
import {FormBox} from '@/components/FormLayout';

import EnumOnFire from "@/pages/dv/constants/EnumOnFire";
import {wrapperType, EnumControlType, layouts, IFields} from "@/pages/dv/constants/EnumCommon";
import {adapterModeMap} from "@/pages/dv/constants/EnumDv";
import dvTool from "@/pages/dv/dvTool";
import {EE} from "@/utils";
import {merge} from 'lodash';

interface IProps {

}

export default class Panel_Home extends React.PureComponent<IProps> {
  public form: any;
  public initialValues: any;

  constructor(props: IProps) {
    super(props);
    this.initialValues = merge(dvTool.dvOption, {bgConfig: dvTool.bgConfig});
  }


  componentDidMount(): void {

  }

  /**
   *  字段值更新时触发回调事件
   * @param changedValues
   * @param allValues
   */
  onValuesChange(changedValues: object, allValues: object) {
    if(changedValues.hasOwnProperty('bgConfig')){
      dvTool.updateBgConfig(changedValues['bgConfig']);
    } else {
      dvTool.updateDvOption(changedValues);
    }

  }


  getFields(): IFields[] {

    return [
      {
        formItemProps: {
          name: 'name',
          label: '大屏名称',
        },
        layout: layouts.vertical,
        controlType: EnumControlType.Input
      },
      {
        formItemProps: {
          name: 'remark',
          label: '大屏描述',
        },
        layout: layouts.vertical,
        controlType: EnumControlType.TextArea,
        controlProps: {
          allowClear: true
        },
      },
      {
        type: wrapperType.divider
      },
      {
        formItemProps: {
          name: 'width',
          label: '大屏宽度',
        },
        col: 12,
        controlType: EnumControlType.InputNumber,
      },
      {
        formItemProps: {
          name: 'height',
          label: '大屏高度',
        },
        col: 12,
        controlType: EnumControlType.InputNumber,
      },
      {
        type: wrapperType.divider
      },
      {
        formItemProps: {
          name: 'adapterMode',
          label: '预览时缩放方式',
        },
        controlType: EnumControlType.RadioGroup,
        layout: layouts.vertical,
        data: Object.values(adapterModeMap).map(item => ({value: item.mode, label: item.label})),
      },
      {
        type: wrapperType.divider
      },
      {
        formItemProps: {
          name: 'bgConfig.bgUrl',
          label: '背景图片',
        },
        controlType: EnumControlType.UploadImage,
        layout: layouts.vertical,
      },
      {
        formItemProps: {
          name: 'bgConfig.bgColor',
          label: '背景颜色',
        },
        layout: layouts.horizontal,
        controlType: EnumControlType.ColorPicker,
        controlProps: {
          mode: 'normal',
        }
      },
      {
        formItemProps: {
          name: 'bgConfig.bgBlur',
          label: '背景图片模糊度'
        },
        col: 12,
        layout: layouts.vertical,
        controlProps: {
          step: 1,
          min: 0,
          max: 20,
          marks: {
            0: '0',
            10: '10',
            20: '20',
          },
        },
        controlType: EnumControlType.Slider
      },
      {
        formItemProps: {
          name: 'bgConfig.bgOpacity',
          label: '背景图片透明度'
        },
        col: 12,
        layout: layouts.vertical,
        controlType: EnumControlType.Slider,
        controlProps: {
          step: 0.01,
          min: 0,
          max: 1,
          tipFormatter: (value: number) => `${(value * 100).toFixed(0)}%`,
          marks: {
            0: '0',
            0.5: '50%',
            1: '100%',
          },
        },
      },
      {
        type: wrapperType.divider
      },
      {
        formItemProps: {
          name: 'isDev',
          label: '是否开发模式',
          // wrapperCol: {span: 6}
          valuePropName: 'checked'
        },
        col: 16,
        controlType: EnumControlType.Switch
      },
      {
        label: <a href={''}>什么是开发模式？</a>,
        controlProps: {
          style: {
            float: 'right',
            lineHeight: '24px'
          },
        },
        type: wrapperType.label,
        col: 8,
      },
    ]
  }

  render(): React.ReactNode {
    return <div className={styles.homePanel + ' scrollbar_theme'}>
      <FormBox
        fields={this.getFields()}
        initialValues={this.initialValues}
        onValuesChange={this.onValuesChange}
        getForm={(form: any) => this.form = form}
      />
    </div>;
  }
}
